<!DOCTYPE html>


<script src="script/jquery-1.5.1.js" type="text/javascript"></script>
<script src="script/jquery.validate.js" type="text/javascript"></script>
<script src="script/jquery-1.5.1.min.js" type="text/javascript"></script>



<style>
.cmxform fieldset p  span.error { color: red; }
form.cmxform { width: 30em; }
form.cmxform label {
	width: 100px;
	display: block;
	float: left;
}

</style>

<script>
// only for demo purposes
$.validator.setDefaults({
	submitHandler: function(form) {
		form.submit();
	}
});

$(document).ready(function() {
	// validate the form when it is submitted
	var validator = $("#form1").validate({
	
		errorElement: "span",
		messages: {
			user: {
				required: " (required)",
				minlength: " (must be at least 3 characters)"
			},
			password: {
				required: " (required)",
				minlength: " (must be between 5 and 12 characters)",
				maxlength: " (must be between 5 and 12 characters)"
			}
		}
	});

	$(".cancel").click(function() {
		validator.resetForm();
	});
});
</script>




<div id="main">

	<p>Errors use spans placed within existing label element</p>

        <form method="get" class="cmxform" id="form1" action="index.php">
		<fieldset>
			<legend>Login Form</legend>
			<p>
				<label for="user">Username</label>
				<input id="user" name="user" required minlength="3">
			</p>
			<p>
				<label for="password">Password</label>
				<input id="password" type="password" maxlength="12" name="password" required minlength="5">
			</p>
			<p>
				<input class="submit" type="submit" value="Login">
				<input class="cancel" type="submit" value="Login">
			</p>
		</fieldset>
	</form>

	<a href="index.html">Back to main page</a>

</div>

